<template>
  <div class="header">
    <div class="header-title">建材供应链数字化驾驶舱</div>
    <div class="header-tabs">
      <!-- <div
        :class="curPath == 'industrialPlanning' ? 'active' : ''"
        @click="
          goPath('industrialPlanning');
          curPath = 'industrialPlanning';
        "
      >
        产业规划
        <img
          v-if="curPath == 'industrialPlanning'"
          src="@/assets/chose.png"
          class="chosePic"
        />
      </div>
      <div
        :class="curPath == 'industryResources' ? 'active' : ''"
        @click="
          goPath('industryResources');
          curPath = 'industryResources';
        "
      >
        产业资源
        <img
          v-if="curPath == 'industryResources'"
          src="@/assets/chose.png"
          class="chosePic"
        />
      </div>

      <div
        :class="curPath == 'industrialOperation' ? 'active' : ''"
        @click="
          goPath('industrialOperation');
          curPath = 'industrialOperation';
        "
      >
        产业运营
        <img
          v-if="curPath == 'industrialOperation'"
          src="@/assets/chose.png"
          class="chosePic"
        />
      </div>

      <div
        :class="curPath == 'digitalTransformation' ? 'active' : ''"
        @click="
          goPath('digitalTransformation');
          curPath = 'digitalTransformation';
        "
      >
        数字转型
        <img
          v-if="curPath == 'digitalTransformation'"
          src="@/assets/chose.png"
          class="chosePic"
        />
      </div> -->

    </div>
    <div class="time-tab">{{ times }}</div>
  </div>
</template>

<script setup>
import { onActivated, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

const goPath = (path) => {
  router.push({
    name: path,
  });
};

let times = ref("");

let curPath = ref("industrialPlanning");
onActivated(() => {
  curPath.value = route.name;

  setInterval(() => {
    const days = [
      "星期日",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
    ];
    const date = new Date();
    const year = date.getFullYear().toString().padStart(4, "0");
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    const day = date.getDate().toString().padStart(2, "0");
    const hour = date.getHours().toString().padStart(2, "0");
    const minute = date.getMinutes().toString().padStart(2, "0");
    const second = date.getSeconds().toString().padStart(2, "0");
    times.value = `${year}-${month}-${day} ${
      days[date.getDay()]
    } ${hour}:${minute}:${second}`;
  }, 1000);
});
</script>

<style scoped lang="scss">
.header {
  height: vw(54);
  width: vw(1440);
  background: rgba(0, 8, 32, 0.2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  background-image: url("@/assets/header.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;

  z-index: 8;
  position: relative;
  .header-title {
    width: 28vw;
   text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 800;
    font-size: vw(24);
    color: #ffffff;
    text-shadow: vh(1) vh(1) 0px rgba(17, 20, 22, 0.22);
    
    letter-spacing: vh(5);
  }
  .header-tabs {
    display: flex;
    align-self: baseline;
    > div {
      // width: vw(70);
      /* height: 18px; */
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: vw(13);
      color: #fff;
      margin: vw(10) vw(12);
      color: #bee9ff;
      cursor: pointer;
      position: relative;
    }
    .active {
      color: #fff;
      font-size: vw(16);
      margin: vh(8) vw(12);
    }
  }
  .time-tab {

   width: 26vw;
   text-align: right;
    align-self: baseline;
    color: #fff;
   
    font-weight: bold;
    font-size: vw(15);
    letter-spacing: vw(2);
    font-family: Source Han Sans CN;
  }
  .chosePic {
    width: vw(183);
    height: vw(52);
    bottom: vw(-34);
    left: vw(-60);
    position: absolute;
    pointer-events: none;
  }
}
</style>